<template>
  <div class="bg">
    <div class="dialog dialog-shadow">
      <LoginForm
        v-if="!registrationMode"
        v-on:changeMode="registrationMode = !registrationMode"
      />
      <RegistrationForm
        v-if="registrationMode"
        v-on:changeMode="registrationMode = !registrationMode"
      />
    </div>
  </div>
</template>

<script setup>
import LoginForm from '@/components/LoginForm.vue'
import RegistrationForm from '@/components/RegistrationForm.vue'
import { ref } from 'vue'

// 表示登陆还是注册状态
const registrationMode = ref(false)




</script>

<style scoped>
.bg {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-repeat: repeat;
}

.dialog {
  width: 450px;
  height: 642px;
  border: 1px solid #dadada;
  border-radius: 10px;
  top: 45%;
  left: 50%;
  margin-top: -371px;
  margin-left: -225px;
  position: absolute;
  background-repeat: repeat;
}

.dialog-shadow {
  -webkit-box-shadow:
    0 9px 30px -6px rgba(0, 0, 0, 0.2),
    0 18px 20px -10px rgba(0, 0, 0, 0.04),
    0 18px 20px -10px rgba(0, 0, 0, 0.04),
    0 10px 20px -10px rgba(0, 0, 0, 0.04);
  -moz-box-shadow:
    0 9px 30px -6px rgba(0, 0, 0, 0.2),
    0 18px 20px -10px rgba(0, 0, 0, 0.04),
    0 18px 20px -10px rgba(0, 0, 0, 0.04),
    0 10px 20px -10px rgba(0, 0, 0, 0.04);
  box-shadow:
    0 9px 30px -6px rgba(0, 0, 0, 0.2),
    0 18px 20px -10px rgba(0, 0, 0, 0.04),
    0 18px 20px -10px rgba(0, 0, 0, 0.04),
    0 10px 20px -10px rgba(0, 0, 0, 0.04);
}
</style>
